<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>game_hall</title>

    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game_hall.css">
    
</head>
<body>
    <div class="nav">网络五子棋对战游戏</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <button id="match-button" onclick="match()">开始匹配</button>
            <br />
            <button id="train-button" onclick="train()">人机训练</button>
        </div>
    </div>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        var ws_url = "ws://" + location.host + "/hall";
        var ws_hdl = null;
        var button_flag = true; // 开始匹配

        window.onbeforeunload = function() {
            ws_hdl.close();
        }


        function get_user_info()
        {
            $.ajax({
                url: "/info",
                type: "get",
                success: function(res) {
                    var user_info = 
                        "<p>" + 
                            "用户名: " + res.username + " 当前分数: " + res.current_score + "<br />" +
                            "比赛场次: " + res.total_games_played + " 获胜场数: " + res.total_wins + 
                        "</p>";
                    var screen_div = document.getElementById("screen");
                    screen_div.innerHTML = user_info;

                    ws_hdl = new WebSocket(ws_url);
                    ws_hdl.onopen = ws_onopne;
                    ws_hdl.onclose = ws_onclose;
                    ws_hdl.onerror = ws_onerror;
                    ws_hdl.onmessage = ws_onmessage;
                },
                error: function(xhr) {
                    alert(JSON.stringify(xhr));
                    location.replace("/login.html");
                }
            });
        }

        get_user_info();
    </script>

</body>

<script>
    function ws_onopne() {
        console.log("ws_onopne()");
    }

    function ws_onclose() {
        console.log("ws_onclose()");
    }

    function ws_onerror() {
        console.log("ws_onerror()");
    }

    function ws_onmessage(evt) {
        var req_json = JSON.parse(evt.data);

        // 判断响应是否错误
        if (!req_json.result) {
            alert(req_json.reason);
            location.replace("/login.html");
            return ;
        }

        if (req_json["optype"] == "hall_ready") {
            console.log("玩家已加入游戏大厅");
            return ;
        }

        var button = document.getElementById("match-button");
        var button_train = $('train-button');
        if (req_json["optype"] == "match_start") {
            console.log("玩家已加入匹配队列");
            button_flag = false;
            button.innerHTML = "停止匹配";
        }        
        else if (req_json["optype"] == "match_stop") {
            console.log("玩家已退出匹配队列");
            button_flag = true;
            button.innerHTML = "开始匹配";
        }
        else if (req_json["optype"] == "match_success") {
            console.log("匹配成功");
            location.replace("/game_room.html");
        }
        else if (req_json["optype"] == "train_start")
        {
            button_train.innerHTML = "正在进入";
        }
        else if (req_json["optype"] == "train_success") {
            console.log("加入房间成功");
            location.replace("/train_room.html");
        }
        else {
            alert(req_json.reason);
            location.replace("/login.html");
        }
    }

    function match()
    {
        if (!button_flag) // 停止匹配
        {
            var req_json = {
                optype: "match_stop"
            };
            ws_hdl.send(JSON.stringify(req_json));
            
        }
        else // 开始匹配 
        {
            var req_json = {
                optype: "match_start"
            };
            ws_hdl.send(JSON.stringify(req_json));
        }
    }

    function train()
    {
        var req_json = {
            optype: "train_start"
        };
        ws_hdl.send(JSON.stringify(req_json));
    }

</script>

</html>